<template>
  <div>
    <el-container>
      <el-aside style="height:640px;">
        <div v-if="this.terminalList.length===0">
          <el-empty description="无可用终端"></el-empty>
        </div>
        <div v-for="(item,index) in this.terminalList" :key="index">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span><b>{{ item.terminalName }}</b></span>
              <el-button style="float: right; padding: 3px 0" type="text" @click="connect(item)">打开终端</el-button>
            </div>
            <div class="text item">
              <span>终端ip地址: {{item.ip}}</span>
            </div>
            <div class="text item">
              <span>终端端口号: {{item.port}}</span>
            </div>
            <div class="text item">
              <span>登录账号: {{item.user}}</span>
            </div>
            <div class="text item">
              <span>登录密码: {{item.password}}</span>
            </div>
            <div class="text item" style="color: red">
              <i class="el-icon-warning-outline"></i>以上信息用于登录，请勿泄露
            </div>
          </el-card>
        </div>

      </el-aside>

      <el-main style="height: 750px">
        <x-terminal ref="terminal" :conn-info="this.activeTerminal"/>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import {queryList} from "@/api/terminal";
import XTerminal from "@/views/XtermTerminal/index.vue";

export default {
  name: "TerminalList",
  components: {
    XTerminal,
  },
  data(){
    return{
      terminalList:[],
      activeTerminal:{
        host: null,
        port: null,
        username: null,
        password: null
      },
    }
  },
  methods:{
    queryList(){
      queryList().then(data=>{
        this.terminalList=data.data
      })
    },
    connect(item){
      this.activeTerminal.password=item.password
      this.activeTerminal.port=item.port
      this.activeTerminal.host=item.ip
      this.activeTerminal.username=item.user
      this.$refs.terminal.loadSocket()
    }
  },
  mounted() {
    this.queryList()
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}

.box-card {
  width: 280px;
  margin-bottom: 10px;
}
</style>
